import { ref, onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { findSubCategoryGoods } from '@/api/category'
// 商品列表
export function useGoodList () {
  // 排他 先把同类设置为false,再把自己设置为true
  function toggleSelected (i, item) {
    // console.log(item, item.properties)
    item.properties.forEach((item) => {
      item.selected = false
    })
    i.selected = true
    // 思路：正式添加之前先检测一下当前要添加的项是否已经在attrs中存在一个同类的项
    // 如果已经存在 就先把同类项删除 再把自己添加进来
    // 如果传下来的是‘全部’ 规格 把当前所属的大项删除
    // attr:[{ groupName:'颜色'} ]
    // console.log(loadSubData)
    const index = reqParams.attrs.findIndex(
      (attr) => attr.groupName === item.name
    )
    console.log(reqParams)
    if (index > -1) {
      reqParams.attrs.splice(index, 1)
    }
    reqParams.attrs.push({
      groupName: item.name,
      propertyName: i.name
    })

    // 点击全部 进行当前大项的删除
    if (i.id === null) {
      const index = reqParams.attrs.findIndex(
        (attr) => attr.groupName === item.name
      )
      if (index > -1) {
        reqParams.attrs.splice(index, 1)
      }
    }
    // 切换类别的时候 把当前请求的页数重置为1
    reqParams.page = 1
    loadData()
  }
  //  publishTime(最新), orderNum(人气), price(价格), evaluateNum(评论)
  const route = useRoute()
  // 排序tab点击交互效果
  const changeSort = ref('publishTime')
  // 获取list
  const goodList = ref([])
  // 请求参数
  const reqParams = reactive({
    page: 1,
    pageSize: 20,
    categoryId: route.params.id,
    sortField: null, // 排序类别
    attrs: [], // 商品属性
    brandId: null // 品牌名称
  })
  async function loadData () {
    const res = await findSubCategoryGoods(reqParams)
    goodList.value = res.result.items
    // 当第一天请求OK之后 把isLoading重新设置为false 正式开启加载下一页的逻辑
    isLoading.value = false
  }
  onMounted(() => {
    loadData()
  })
  // 更改排序 获取数据
  function changeSortType (type) {
    changeSort.value = type
    // 1.把传下来的sortType 赋值 reqData中的sortField字段
    reqParams.sortField = type
    // 2.修改完毕之后重新调用goodList方法 获取最新的数据
    loadData()
  }
  // 品牌切换
  function changeBrand (brand) {
    reqParams.brandId = brand.id
    loadData()
  }
  // 加载更多功能
  const isFinished = ref(false) // 是否全部加载完毕
  const isLoading = ref(false)
  // 是否正处于数据获取中 默认值为true 因为在页面一上来的时候mounted中就已经开始加载第一页数据了
  // 等到数据获取到之后再把isLoading设置为false
  async function loadNextList () {
    // console.log('开始加载下一页数据')
    // 使用下一页参数获取下一页数据
    // 目标：加载下一页数据
    // 0. isLoading 设置为true  告诉我的组件当前已经在加载中 不要重复触发load事件
    // 1. reqData.page++
    // 2. 使用最新的page字段数据获取下一页数据 发送网络请求
    // 3. 下一页数据返回之后 需要把新数据拼接到老数据的后面
    // 4. 重新把isLoading设置为false 告诉我的组件本次数据已经处理完毕 可以再次开启监听了
    // 5. 判断返回数据长度是否为零 如果为零 isFinished设置为true
    isLoading.value = true
    reqParams.page++
    const res = await findSubCategoryGoods(reqParams)
    const newList = res.result.items
    if (newList.length === 0) {
      // 停止监听
      isFinished.value = true
    }
    goodList.value = [...goodList.value, ...res.result.items]
    isLoading.value = false
  }
  return {
    goodList,
    toggleSelected,
    changeSortType,
    changeBrand,
    loadNextList,
    changeSort,
    isFinished,
    isLoading
  }
}
